<template>
  <div class="addType">
    <div class="addType-content">
      <div class="addType-row">
        <div class="addType-row-name">
          <span></span>
          代理名称
        </div>
        <div class="addType-row-input">
          <input type="text" placeholder="请输入代理姓名" v-model="typeObj.name">
        </div>
      </div>
      <div class="addType-row">
        <div class="addType-row-name">
          <span></span>
          代理类型
        </div>
        <div class="addType-row-input" @click.stop="test">
          <input type="text" placeholder="请选择代理类型" v-model="typeData.value">
          <div class="addType-row-select">

          </div>

        </div>
      </div>
      <div class="addType-row">
        <div class="addType-row-name">
          <span></span>
          分润比例
        </div>
        <div class="addType-row-input">
          <input type="number" placeholder="请输分润比例" v-model="typeObj.share_proportion">
        </div>
      </div>
      <div class="addType-row">
        <div class="addType-row-name">
          <span></span>
          固定分红
        </div>
        <div class="addType-row-input">
          <input type="number" placeholder="请输入固定分红金额" v-model="typeObj.bonus_money">
        </div>
      </div>
      <div class="addType-row">
        <div class="addType-row-name">
          <span></span>
          手机号码
        </div>
        <div class="addType-row-input">
          <input type="number" placeholder="请输入手机号" v-model="typeObj.phone">
        </div>
      </div>
      <div class="addType-row">
        <div class="addType-row-name">
          <span></span>
          登录密码
        </div>
        <div class="addType-row-input">
          <input type="password" placeholder="请输入登录密码" v-model="typeObj.password">
        </div>
      </div>
      <div class="addType-row">
        <div class="addType-row-name">
          <span></span>
          提现密码
        </div>
        <div class="addType-row-input">
          <input type="password" placeholder="请输入提现密码" v-model="typeObj.cash_out_password">
        </div>
      </div>
    </div>
    <div class="addtype-btn" @click="add">添加</div>
    <nut-picker :is-visible="isVisible3" :list-data="listData" title="请选择代理类型" @close="closeSwitch('isVisible3')"
          @confirm="confirm3"></nut-picker>
  </div>
</template>

<script>
  import { AgentAddMethod } from '@/utils/request.js'

  export default {
    data() {
      return {
        typeObj: {
          name: "",
          type: "",
          share_proportion: "",
          bonus_money: "",
          phone: "",
          password: "",
          cash_out_password: "",
        },
        hasAdd: true,
        isVisible3: false,
        listData: [
          [{
              label: 1,
              value: '分红股东'
            },
            {
              label: 2,
              value: '电销'
            },
          ]
        ],
        typeData: {}
      }
    },
    mounted() {
      document.title = "添加代理"
    },
    methods: {
      test() {
        this.isVisible3 = true
      },
      closeSwitch(param) {
        this.isVisible3 = false
      },
      confirm3(chooseData) {
        this.typeObj.type = chooseData[0].label;
        this.typeData = chooseData[0];
      },
      add() {
        if (!this.typeObj.name) {
          this.$toast.text('请输入代理姓名', {
            bgColor: 'rgba(50, 50, 50, 0.9)'
          });
        } else if (!this.typeObj.type) {
          this.$toast.text('请输代理类型', {
            bgColor: 'rgba(50, 50, 50, 0.9)'
          });
        } else if (!this.typeObj.share_proportion) {
          this.$toast.text('请输分润比例', {
            bgColor: 'rgba(50, 50, 50, 0.9)'
          });
        } else if (!this.typeObj.phone) {
          this.$toast.text('请输入手机号', {
            bgColor: 'rgba(50, 50, 50, 0.9)'
          });
        } else {
          if (this.hasAdd == false) return
          this.hasAdd = false
          AgentAddMethod(this.typeObj).then((res) => {
            if (res.code == 200) {
              this.$toast.success(res.msg)
              setTimeout(() => {
                this.$router.go(-1)
              }, 1500)
            } else {
              this.$toast.fail(res.msg)
            }
            this.hasAdd = true
          })
        }
      },
    }
  };
</script>

<style lang="less">
  .addType {
    padding: 15px;
    box-sizing: border-box;
    .addType-content {
      background: #FFFFFF;
      box-shadow: 0px 0px 9px 0px rgba(51, 51, 51, 0.09);
      border-radius: 5px;
      padding: 18px 0;

      .addType-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
        padding: 0 17px;

        .addType-row-name {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: #333;
          min-width: 96px;
          box-sizing: border-box;

          span {
            display: block;
            min-width: 6px;
            height: 6px;
            border-radius: 6px;
            background-color: #1677FF;
            margin-right: 5px;
          }
        }

        .addType-row-input {
          width: 100%;
          height: 36px;
          border-radius: 5px;
          background-color: #E5E5E5;
          font-weight: bold;
          overflow: hidden;

          .addType-row-select {
            height: 36px;
            width: 100%;
            overflow: hidden;
          }

          input {
            width: 100%;
            height: 36px;
            border: 0;
            outline: none;
            padding-left: 18px;
            box-sizing: border-box;
            font-weight: bold;
            font-size: 12px;
            color: #333;
          }

          ::-webkit-input-placeholder {
            font-weight: bold;
            font-size: 12px;
          }

          ::-moz-placeholder {
            font-weight: bold;
            font-size: 12px;
          }

          :-ms-input-placeholder {
            font-weight: bold;
            font-size: 12px;
          }
        }

      }
    }

    .addtype-btn {
      background-color: #1677FF;
      color: #fff;
      width: 100%;
      height: 44px;
      line-height: 44px;
      border-radius: 30px;
      text-align: center;
      margin-top: 19px;
      letter-spacing: 10px;
    }
  }

  .nut-cell {
    margin: 0;
    padding: 0;
    height: 36px;
    background-color: transparent;

    .nut-cell-box {
      background-color: #e5e5e5;
      height: 36px;
      display: flex;

      .nut-cell-left {
        display: none;
      }
    }
  }
</style>
